<template>
	<gui-page 
	:fullPage="true" 
	:isLoading="pageLoading" 
	ref="guiPage">
		<template 
		v-slot:gBody>
			<view 
			class="gui-flex1 gui-flex gui-column">
				<!-- 如果页面有其他元素请使用 view 布局即可 -->
				<!-- view style="height:200rpx;" class="gui-bg-blue"></view -->
				<view 
				class="gui-flex1 gui-relative">
					<gui-slide-list 
					class="gui-flex1" 
					:msgs="msgs" 
					@itemTap="itemTap" 
					@btnTap="btnTap" 
					@scrolltolower="loadMore" 
					ref="guiSlideList"></gui-slide-list>
				</view>
			</view>
		</template>
	</gui-page>
</template>
<script>
// 模拟个 api 请求的数据
var face = "https://images.unsplash.com/photo-1662695089339-a2c24231a3ac?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=60";
var msgsFromApi = [
	{
		img       : face,
		msgnumber : 8,
		title     : "某某某",
		time      : "30分钟前",
		content   : "消息内容 ..."
	},
	{
		img       : face,
		msgnumber : 0,
		title     : "某某某",
		time      : "08/10/2020",
		content   : "语音消息"
	},
	{
		img       : face,
		msgnumber : 12,
		title     : "某某某",
		time      : "昨天",
		content   : "图片消息"
	},
	{
		img       : face,
		msgnumber : 1,
		title     : "某某某",
		time      : "08/08/2020",
		content   : "系统消息"
	},
	{
		img       : face,
		msgnumber : 8,
		title     : "某某某",
		time      : "30分钟前",
		content   : "消息内容 ..."
	},
	{
		img       : face,
		msgnumber : 0,
		title     : "某某某",
		time      : "08/10/2020",
		content   : "语音消息"
	},
	{
		img       : face,
		msgnumber : 12,
		title     : "某某某",
		time      : "昨天",
		content   : "图片消息"
	},
	{
		img       : face,
		msgnumber : 1,
		title     : "某某某",
		time      : "08/08/2020",
		content   : "系统消息"
	},
	{
		img       : face,
		msgnumber : 8,
		title     : "某某某",
		time      : "30分钟前",
		content   : "消息内容 ..."
	},
	{
		img       : face,
		msgnumber : 0,
		title     : "某某某",
		time      : "08/10/2020",
		content   : "语音消息"
	},
	{
		img       : face,
		msgnumber : 12,
		title     : "某某某",
		time      : "昨天",
		content   : "图片消息"
	},
	{
		img       : face,
		msgnumber : 1,
		title     : "某某某",
		time      : "08/08/2020",
		content   : "系统消息"
	}
];
export default {
	data() {
		return {
			msgs : [],
			pageLoading : true
		}
	},
	onLoad:function(){
		// 模拟 api 请求，因为请求数据里没有按钮信息我们利用js进行按钮补充
		setTimeout(() => {
			for(let i = 0; i < msgsFromApi.length; i++){
				// 具体几个按钮及按钮文本根据项目需求来，格式 {name:按钮文本, bgColor:按钮背景色}
				msgsFromApi[i].btns = [
					{'name':'标为已读', bgColor:'#323232'}, 
					{'name':'删除消息', bgColor:'#FF0036'},
				];
			}
			this.msgs = msgsFromApi;
			this.pageLoading = false;
		}, 500);
	},
	methods:{
		btnTap : function(index, btnIndex){
			console.log(index, btnIndex);
			// 第一个按钮被点击 [ 标记已读 ]
			if(btnIndex == 0){
				if(this.msgs[index].btns[0].name == '标为已读'){
					this.msgs[index].btns = [
						{'name':'标为未读', bgColor:'#888888'}, 
						{'name':'删除消息', bgColor:'#FF0036'},
					];
					this.msgs[index].msgnumber = 0;
				}else{
					this.msgs[index].btns = [
						{'name':'标为已读', bgColor:'#323232'}, 
						{'name':'删除消息', bgColor:'#FF0036'},
					];
					this.msgs[index].msgnumber = 1;
				}
				setTimeout(()=>{
					this.msgs.splice(index, 1, this.msgs[index]);
				}, 300);
			}
			// 第二个按钮被打开 [ 删除消息 ]
			else if(btnIndex == 1){
				uni.showModal({
					title:"确定要删除吗?",
					success: (e) => {
						if(e.confirm){
							this.msgs.splice(index, 1);
							this.$refs.guiSlideList.moveIndex = -1;
						}
					}
				});
			}
		},
		// 列表本身被点击
		itemTap : function (e) {
			console.log(e);
			uni.showToast({title:"索引"+e});
		},
		loadMore : function () {
			this.$refs.guiSlideList.startLoadig();
			// 模拟 api 请求，因为请求数据里没有按钮信息我们利用js进行按钮补充
			setTimeout(() => {
				// 加载全部
				// this.$refs.guiSlideList.nomore();
				
				// 正常加载
				for(let i = 0; i < msgsFromApi.length; i++){
					// 具体几个按钮及按钮文本根据项目需求来，格式 {name:按钮文本, bgColor:按钮背景色}
					msgsFromApi[i].btns = [
						{'name':'标为已读', bgColor:'#323232'}, 
						{'name':'删除消息', bgColor:'#FF0036'},
					];
				}
				this.msgs = this.msgs.concat(msgsFromApi);
				// 结束加载动画可以继续下一次的加载更多
				this.$refs.guiSlideList.endLoading();
			}, 500);
		}
	}
}
</script>
<style scoped lang="scss">
</style>